<template>
  <div class="tableBox">
    <PublicTable
        ref="zhenDuanWHTable"
        class="table"
        :loading="loading"
        :current-page="searchParams.pageNum"
        :total="total"
        :page-size="searchParams.pageSize"
        :table-data="tableData"
        :table-info="tableInfo"
        :table-column="columns"
        :btn-button="operations"
        :events="events"
        operation-width="150px"
        @sizeChange="handleSizeChange"
        @currentChange="handleCurrentChange"
        :isNeedPagination="isNeedPaginationRef"
    />
  </div>
</template>

<script setup lang="ts">
import {ref, reactive} from 'vue'
import PublicTable from './component/sealedtable.vue'
import mockList from './component/mockData'
const tableData = ref(mockList)
const zhenDuanWHTable = ref()
const loading = ref(false)
const searchParams = reactive({
  pageNum: 1,
  pageSize: 10
})
const total = ref(0)
const isNeedPaginationRef = ref(false)  // 分页
const tableInfo = reactive({
  stripe: true,
  'highlight-current-row': true // 选中行高亮
})
const columns = reactive([
  {
    prop: 'title',
    label: '审核描述',
    minWidth: '100px',
    align: 'center',
    formatter: row => (row.title ? row.title : '暂无标题')
  },
  {
    prop: 'statusDesc',
    minWidth: '100px',
    align: 'center',
    label: '审核状态'
  },
  {
    prop: 'createBy',
    minWidth: '100px',
    align: 'center',
    label: '申请人'
  },
  {
    sortable: 'custom',
    prop: 'createdTime',
    minWidth: '100px',
    align: 'center',
    label: '申请时间'
  },
  {
    prop: 'auditBy',
    minWidth: '100px',
    align: 'center',
    label: '审核人'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'auditTime',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'A',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'B',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'C',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'D',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  },
  {
    minWidth: '100px',
    align: 'center',
    prop: 'E',
    label: '审核时间'
  }
])
const operations = reactive([
  {
    text: '编辑',
    isShow: row => true, // 是否展示
    isDisable: row => true, // 是否禁用
    type: 'text',
    class: 'el-text-color',
    callback: row => {
      this.handleAddOrEdit('edit', row)
    }
  }
])
const events = reactive({
  'row-dblclick': row => {
    //双击表格项触发的函数
    console.log(row)
  },
  'row-click': row => {
    // 单机表格项触发的函数
    console.log('row', row)
  }
})

// 每也条数改变
const handleSizeChange = (pageSize:any) => {
  searchParams.pageSize = pageSize

}
// 改变页数
const handleCurrentChange = (pageNum:any)=>{
  searchParams.pageNum = pageNum
}
const handleAddOrEdit = (type:any, row:any) =>{
  if (type === 'edit') {
    visible = true
    infoData = row
  }
}
</script>

<style scoped lang="scss">
.tableBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 600px;

  .table {
    height: calc(100% - 48px);
  }
}
</style>